<template>
    <div class="container">

        <!--查询部分-->
        <!--inline=true水平摆放form表单-->
        <el-form ref="deptQueryForm" :inline="true" :model="deptQueryForm">

            <el-form-item prop="name" size="small" label="部门名称">
                <el-input clearable v-model="deptQueryForm.name" placeholder="请输入菜单名称"></el-input>
            </el-form-item>

            <el-form-item prop="status" size="small" label="部门状态">
                <el-select clearable v-model="deptQueryForm.status" placeholder="菜单状态">
                    <el-option :key="index" v-for="(item,index) in $dictMap('status')" :label="item.desc"
                               :value="item.value"></el-option>
                    <!--<el-option label="正常" value=1></el-option>-->
                    <!--<el-option label="停用" value=0></el-option>-->
                </el-select>
            </el-form-item>

            <el-form-item size="mini">
                <el-button @click="getDeptTree" style="width: 80px" type="primary"><i
                        class="iconfont icon-search-line"/><span>查询</span>
                </el-button>
            </el-form-item>

            <el-form-item size="mini">
                <el-button @click="reset" style="width: 80px" type="normal"><i
                        class="iconfont icon-zhongzhi-"/><span>重置</span>
                </el-button>
            </el-form-item>

            <el-form-item size="mini">
                <el-button plain style="width: 80px" type="primary" @click="addDeptView"><i
                        class="iconfont icon-jia"/><span>新增</span></el-button>
            </el-form-item>
        </el-form>
        <!--查询部分-->

        <!--菜单列表 表格部分-->
        <el-table
                :header-cell-style="{'text-align':'center',background:'#f8f8f9',color:'#606266'}"
                :cell-style="{'text-align':'center'}"
                :data="deptTreeData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                :tree-props="{children: 'childDept', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="部门名称">
            </el-table-column>

            <el-table-column
                    prop="sort"
                    sortable
                    width="100"
                    label="排序">
            </el-table-column>

            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span>{{$dictMapDesc('status',scope.row.status)}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    sortable
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="updateTime"
                    sortable
                    label="更新时间">
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"
                               @click="editDeptView(scope.row)" round>修改
                    </el-button>
                    <el-button size="mini" type="danger" @click="delDept(scope.row)" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--菜单列表 表格部分-->

        <!--添加部门 dialog-->
        <el-dialog @close="closeDialog" :title="dialogName" :visible.sync="addDeptVisible">
            <!--label-width 表单里面label的标签-->
            <el-form class="myform" ref="deptAddForm" :inline="true" :rules="deptRules" :model="deptForm"
                     label-width="80px">
                <el-form-item class="fullWidthFormItem" label="上级部门">
                    <!--这里是引用的第三方组件-->
                    <el-select-tree
                            :check-strictly="true"
                            :clearable="true"
                            style="width:100%"
                            placeholder="请选择上级部门"
                            :props="{ value: 'id', label: 'name', children: 'childDept' }"
                            :data="deptTreeData"
                            v-model="deptForm.parentId">
                    </el-select-tree>
                </el-form-item>


                <!--由于el-from-item会自动撑满两旁，所以不用设置居中对其-->
                <el-form-item prop="name" label="部门名称">
                    <el-input v-model="deptForm.name"></el-input>
                </el-form-item>

                <el-form-item prop="sort" label="显示排序">
                    <el-input-number v-model="deptForm.sort" controls-position="right" :min="1"
                                     :max="15"></el-input-number>
                </el-form-item>

                <el-form-item label="负责人">
                    <el-input v-model="deptForm.principal"></el-input>
                </el-form-item>

                <el-form-item label="联系电话">
                    <el-input v-model="deptForm.principalPhone"></el-input>
                </el-form-item>

                <el-form-item label="邮箱">
                    <el-input v-model="deptForm.email"></el-input>
                </el-form-item>

                <el-form-item label="部门状态">
                    <el-radio :key="index" v-for="(item,index) in $dictMap('status')" v-model="deptForm.status"
                              :label="item.value">{{item.desc}}
                    </el-radio>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="oprMenu">确 定</el-button>
            </div>
        </el-dialog>
        <!--添加部门 dialog-->
    </div>
</template>

<script>

    export default {
        inject: ["reload"],
        name: "Dept",
        data() {
            return {
                authenticate(name) {
                    return this.$authenticate(this.$route.path, name)
                },
                deptQueryForm: {},
                deptForm: {},
                addDeptVisible: false,
                deptTreeData: [],
                dialogName: "添加部门",
                deptRules: {
                    name: [
                        {required: true, message: '请输入部门名称', trigger: 'blur'}
                    ],
                    sort: [
                        {required: true, message: '请选择部门排序', trigger: 'blur'}
                    ],
                }
            }
        },
        computed: {

        },
        created() {
            this.getDeptTree()
        },
        methods: {
            init() {
                this.deptForm = {
                    status: this.$dictMapDefault('status'),
                }
            },

            addDeptView() {
                this.init()
                this.dialogName = '添加部门';
                this.addDeptVisible = true;
            },

            editDeptView(row){
                this.addDeptVisible=true;
                this.deptForm=row;
                this.dialogName='编辑部门'
            },

            closeDialog() {
                this.init()
                this.addDeptVisible = false;
                this.$nextTick(() => {
                    this.$refs['deptAddForm'].clearValidate()
                })
            },

            reset() {
                this.$refs.deptQueryForm.resetFields()
            },

            getDeptTree() {
                this.$get("/dept/getDeptTree", this.deptQueryForm).then(({data}) => {
                    this.deptTreeData = data[0].childDept;
                })
            },
            delDept(dept) {
                this.$confirm(`确定永久删除 '${dept.name}' 菜单吗？`, '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$del("/dept/delDept", {
                        id: dept.id
                    }).then(() => {
                        this.$message("删除成功");
                        sessionStorage.removeItem("deptTree");
                        this.reload();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: "已取消删除"
                    });
                });
            },


            // 添加、编辑框 点击确认的时候
            oprMenu() {
                this.$refs['deptAddForm'].validate(async (valid) => {
                    if (!valid) {
                        return false
                    }

                    // 如果没有id，那么就是新增，否则就是编辑
                    if (this.deptForm.id === undefined || this.deptForm.id === null) {
                        await this.$post("/dept/addDept", this.deptForm)
                    } else {
                        try {
                            await this.$put("/dept/editDept", this.deptForm)
                        } catch (e) {
                            this.addDeptVisible = false;
                            return
                        }
                    }

                    // 关闭编辑框
                    this.addDeptVisible = false

                    // 提示框
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    })

                    // 因为编辑的时候可能已经添加了id，记得要清除id
                    this.deptForm.id = null;

                    //重新装载数据 todo key值写成枚举
                    this.reload();

                });
            },
        }
    }
</script>

<style scoped>

</style>